import React, { Component, use, useEffect, useRef } from "react";
import * as echarts from "echarts";
export default function Home() {
  let charRef = useRef(null);
  useEffect(() => {
    let chart = echarts.init(charRef.current);
    const xdata = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    let option = {
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: xdata,
      },
      yAxis: {
        type: "value",
      },
      color: ["#c9e6ff", "#ddf2ec", "#fbe4e7"],
      series: [
        {
          data: [
            ["Mon", 100],
            ["Tue", 400],
            ["Wed", 300],
          ],
          type: "line",
          symbolSize: 0,
          smooth: true,
          areaStyle: {},
          lineStyle: {
            color: "#0088ff",
          },
        },
        {
          data: [
            ["Wed", 300], //上一阶段最后一个
            ["Thu", 400],
            ["Fri", 300],
          ],
          type: "line",
          smooth: true,
          symbolSize: 0,
          lineStyle: {
            type: "dashed",
            color: "#ccc",
          },
          areaStyle: {},
        },
        {
          data: [
            ["Fri", 300], //上一阶段最后一个
            ["Sat", 400],
            ["Sun", 300],
          ],
          type: "line",
          smooth: true,
          symbolSize: 0,
          lineStyle: {
            type: "dashed",
            color: "#ccc",
          },
          areaStyle: {},
        },
      ],
    };
    chart.setOption(option);
  }, []);
  return (
    <>
      <div className="home" style={{width:"500px",height:"500px"}} ref={charRef}>
        home
      </div>
    </>
  );
}
